<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            background-color: pink;
        }
    </style>
</head>

<body>
    <div id="test"></div>

    <!-- 引入核心库 -->
    <script type="text/javascript" src="./React-js/16.8/react.development.js"></script>
    <!-- 用于支持react操作DOM -->
    <script text="text/javascript" src="./React-js/16.8/react-dom.development.js"></script>
    <!-- 用于将jsx转换为js -->
    <script text="text/javascript" src="./React-js/16.8/babel.min.js"></script>

    <script type="text/babel">
        /** 
        * *高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。
        * 1.若A雨数，接收的参数是一个函数，那么A就可以称之为高阶函数。
        * 2.若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。
        *   常见的高阶函数有: Promise、setTimeout、arr.map()等等
        * 
        * *函数的柯里化: 通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。
        */

        /* 普通写法： */
        // class Demo extends React.Component {
        //     state = {
        //         username:'',
        //         password:''
        //     }

        //     // 保存
        //     saveUsername = (e)=>{
        //         this.setState({username:e.target.value})
        //     }
        //     savePassword = (e)=>{
        //         this.setState({password:e.target.value})
        //     }

        //     // 展示左侧输入框的数据
        //     handleSubmit = (e)=>{
        //         e.preventDefault()  // 阻止默认行为
        //         const {username,password } = this.state
        //         console.log('用户名密码：',username,password);
        //     }
        //     render() {
        //         // 
        //         return (
        //             <form onSubmit={this.handleSubmit}>
        //                 用户名：<input onChange={this.saveUsername} type="text" />
        //                 密码：<input onChange={this.savePassword} type="password" />
        //                 <button>登录</button>
        //             </form>

        //         )
        //     }
        // }

        /* 柯里化写法： */
        // class Demo extends React.Component {
        //     state = {
        //         username: '',
        //         password: ''
        //     }

        //     // 保存。柯里化写法
        //     saveData = (dataType) => {
        //         console.log('dataType', dataType);
        //         return (e) => {
        //             this.setState({ [dataType]: e.target.value })
        //         }
        //     }

        //     handleSubmit = (e) => {
        //         e.preventDefault()  // 阻止默认行为
        //         const { username, password } = this.state
        //         console.log('用户名密码：', username, password);
        //     }
        //     render() {
        //         // 
        //         return (
        //             <form onSubmit={this.handleSubmit}>
        //                 用户名：<input onChange={this.saveData('username')} type="text" />
        //                 密码：<input onChange={this.saveData('password')} type="password" />
        //                 <button>登录</button>
        //             </form>

        //         )
        //     }
        // }

        /* 不使用柯里化写法： */
        class Demo extends React.Component {
            state = {
                username: '',
                password: ''
            }

            // 保存。
            saveData = (dataType, data) => {
                console.log('dataType', dataType, data);
                this.setState({ [dataType]: data })
            }

            handleSubmit = (e) => {
                e.preventDefault()  // 阻止默认行为
                const { username, password } = this.state
                console.log('用户名密码：', username, password);
            }
            render() {
                // 
                return (
                    <form onSubmit={this.handleSubmit}>
                        用户名：<input onChange={(e) => this.saveData('username', e.target.value)} type="text" />
                        密码：<input onChange={(e) => this.saveData('password', e.target.value)} type="password" />
                        <button>登录</button>
                    </form>

                )
            }
        }


        ReactDOM.render(<Demo />, document.querySelector('#test'))
    </script>
</body>

</html>